<template>
  <van-popover placement="top-start" class="face-popover" v-model:show="visible">
    <div class="flex flex-wrap ml-[1px] mt-[1px] p-1 justify-between">
      <div
        v-for="item in faceList"
        class="p-2 cursor-pointer hover:bg-gray-100 hover:border-blue-500 hover:relative"
        @click="handleSelect(item)"
      >
        <img :src="item.img" alt="" class="w-7 h-7 block" />
      </div>
    </div>
    <template #reference> <van-icon name="smile-o" size="1.75rem" class="p-1" /></template>
  </van-popover>
</template>

<script setup lang="ts">
import { faceList } from '@/common/constants'
import { useDialog } from '@/common/utils'

const { visible, handleClose } = useDialog(false)

const handleSelect = () => {
  handleClose()
}
</script>

<style lang="less" scoped>
.face-popover {
  left: 0 !important;
  top: initial !important;
  bottom: 3.5rem;
  :deep(.van-popover__content) {
    border-radius: 0 !important;
    height: 20rem;
    overflow: auto;
  }
  :deep(.van-popover__arrow) {
    display: none;
  }
}
</style>
